<template>
  <Panel>
    <!-- 标题 -->
    <template #tit>
      修改密码
    </template>
    <!-- 内容 -->
    <template>
      <el-form
        :model="PwdForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item label="原密码" prop="rawpwd">
          <el-input
            type="text"
            v-model="PwdForm.rawpwd"
            autocomplete="off"
            @blur="checkPwd"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpwd">
          <el-input
            type="text"
            v-model="PwdForm.newpwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="affirmpwd">
          <el-input
            type="text"
            v-model="PwdForm.affirmpwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
// 导入用户名和密码的验证
import {
  // 验证原密码
  validatePwd,
  // 验证新密码,用到了闭包
  validateNewPwd,
  //验证确认新密码,用到了闭包
  validAffirmpwd
} from '../../utils/validate'

// 8导入 '接口' 功能函数
// 9导出修改密码的功能函数
import { ckeckOldpass, resetPass } from '../../api/users'

//导入本地存储凭证的,当修改成功把凭证删除
import local from '../../utils/local'

export default {
  data() {
    return {
      // 数据对象
      PwdForm: {
        rawpwd: '',
        newpwd: '',
        affirmpwd: ''
      },
      // 规则对象
      rules: {
        rawpwd: [{ validator: validatePwd, trigger: 'blur' }],
        newpwd: [
          { validator: validateNewPwd('新密码', this), trigger: 'blur' }
        ],
        affirmpwd: [
          { validator: validAffirmpwd('确认新密码', this), trigger: 'blur' }
        ]
      },
      passFlag: false
    }
  },
  methods: {
    //判断表格是否都有值
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        // 有值就可以提交
        if (valid) {
          // 要做一个判断,判断原密码发送请求是正确时
          if (this.passFlag) {
            const { code, msg } = await resetPass({
              newPwd: this.PwdForm.newpwd
            })
            if (code === 0) {
              this.$message.success(msg)
              local.cls()
              //这里没写拦截所有不能刷新到首页
              // location.reload()
              setTimeout(() => {
                // this.$router.push('/login')
                location.reload()
              }, 2000)
            } else {
              this.$message.error('修改失败')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //检查原密码的方法,并发送请求
    async checkPwd() {
      // console.log('12123')
      const { code, msg } = await ckeckOldpass({
        oldPwd: this.PwdForm.rawpwd
      })
      if (code === '00') {
        this.$message.success(msg)
        this.passFlag = true
      } else {
        this.$message.error(msg)
        this.passFlag = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input,
.el-select {
  width: 300px;
}
</style>
